<template>
  <div>
    <div style="display: flex;justify-content: space-between; margin-bottom: 8px">
      <b style="font-size: 16px;">设备信息</b>
      <div>
        <el-button type="primary" size="small" @click="tonetworkestimate"
          v-if="detail.riskMark != '1' && detail.afterRiskLevel != '1'">抗定位</el-button>
        <el-button type="primary" size="small" @click="relocation">重新定位</el-button>
      </div>
    </div>
    <div style="width: 100%; height: calc(100vh - 110px);display: flex;">
      <div style="width: 20%; height: 100%; float: left;overflow: auto;">
        <el-descriptions :column="1" border>
          <!-- <template slot="extra">
            <el-button type="primary" size="small" @click="tonetworkestimate">抗定位</el-button>
            <el-button type="primary" size="small">重新定位</el-button>
          </template> -->
          <el-descriptions-item label="设备名称" v-if="detail.equipname">{{
            detail.equipname
          }}</el-descriptions-item>
          <el-descriptions-item label="设备类型" v-if="detail.equiptype">{{
            detail.equiptype
          }}</el-descriptions-item>
          <el-descriptions-item label="设备IP" v-if="detail.equipIp">{{
            detail.equipIp
          }}</el-descriptions-item>
          <el-descriptions-item label="风险等级" v-if="detail.riskLevel">
            <el-tag v-if="detail.riskLevel == '1'" type="success">低风险</el-tag>
            <el-tag v-if="detail.riskLevel == '2'" type="warning">中风险</el-tag>
            <el-tag v-if="detail.riskLevel == '3'" type="danger">高风险</el-tag>
            <span v-if="detail.afterRiskLevel"> >>> </span>
            <el-tag v-if="detail.afterRiskLevel == '1'" type="success">低风险</el-tag>
            <el-tag v-if="detail.afterRiskLevel == '2'" type="warning">中风险</el-tag>
            <el-tag v-if="detail.afterRiskLevel == '3'" type="danger">高风险</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="标识" v-if="detail.riskMark">
            <el-tag v-if="detail.riskMark == '0'" type="danger">未定位</el-tag>
            <el-tag v-if="detail.riskMark == '1'" type="success">定位已完成</el-tag>
            <el-tag v-if="detail.riskMark == '2'" type="warning">抗定位已完成</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="设备地址" v-if="detail.equipAddress">{{
            detail.equipAddress
          }}</el-descriptions-item>
          <el-descriptions-item label="所属国家" v-if="detail.equipCountry">{{
            detail.equipCountry
          }}</el-descriptions-item>
          <el-descriptions-item label="所属省份" v-if="detail.equipState">{{
            detail.equipState
          }}</el-descriptions-item>
          <el-descriptions-item label="所属城市" v-if="detail.equipCity">{{
            detail.equipCity
          }}</el-descriptions-item>
          <el-descriptions-item label="所属区域" v-if="detail.equipArea">{{
            detail.equipArea
          }}</el-descriptions-item>
          <el-descriptions-item label="所属组织" v-if="detail.equipOrg">{{
            detail.equipOrg
          }}</el-descriptions-item>
          <el-descriptions-item label="设备真实坐标" v-if="detail.equipLon">{{ detail.equipLon }},{{ detail.equipLat
          }}</el-descriptions-item>
          <el-descriptions-item label="抗定位后坐标" v-if="detail.afterEquipRiskLon">{{ detail.afterEquipRiskLon }},{{
            detail.afterEquipRiskLat
          }}</el-descriptions-item>
          <el-descriptions-item label="抗定位前距离" v-if="detail.beforeRiskDistance">{{ detail.beforeRiskDistance
          }}km</el-descriptions-item>
          <el-descriptions-item label="抗定位后距离" v-if="detail.afterRiskDistance">{{ detail.afterRiskDistance
          }}km</el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="width: 80%; height: 100%; float: left">
        <b-map class="testMap" ref="mapmarkInfoRef" :center="center" :zoom="zoom" @markerClick="markerHandle"
          :height="'100%'" @markerClickdetail="markerHandledetail">
        </b-map>
      </div>
    </div>
    <el-dialog title="选择定位算法标识" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules">
        <el-form-item label="定位算法标识" :label-width="'120px'" prop="algorithmMark">
          <el-select v-model="form.algorithmMark" placeholder="请选择定位算法标识">
            <el-option v-for="dict in dict.type.equipment_algorithmmark" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getDetail } from "@/api/networkEquipment/equipment";
import BMap from "./components1/bmap.vue";
import { detailEquip, repositioning } from "@/api/networkEquipment/equipment";
export default {
  data() {
    return {
      detail: {},
      center: null,
      zoom: null,
      itemDetail: null,
      dialogFormVisible: false,
      form: {
        id: '',
        algorithmMark: ''
      },
      rules: {
        algorithmMark: [
          { required: true, message: '请选择定位算法标识', trigger: 'change' }
        ],
      }
    };
  },
  dicts: ['equipment_algorithmmark'],
  components: { BMap },
  mounted() {
    this.id = this.$route.query.id;
    //发送请求获取数据
    this.initMap(this.$route.query.id);
  },
  methods: {
    async initMap(id) {
      let res = await detailEquip(id);
      if (res.code == 200) {
        this.detail = res.data;
        this.form.id = this.detail.id
        this.form.algorithmMark = this.detail.algorithmMark
        let itemDetail = res.data;
        this.center = { lng: itemDetail.equipLon, lat: itemDetail.equipLat };
        this.zoom = Math.abs(
          (itemDetail.equipLat - itemDetail.beforeEquipRiskLat) / 6
        );
        console.log("detaildetaildetail", itemDetail);
        this.$nextTick(() => {
          this.$refs.mapmarkInfoRef.setData({
            points: [
              {
                lng: itemDetail.afterEquipRiskLon,
                lat: itemDetail.afterEquipRiskLat,
                color: "blue",
                params: {
                  name: "抗定位后估计位置",
                  ...itemDetail,
                },
              },
              {
                lng: itemDetail.equipLon,
                lat: itemDetail.equipLat,
                color: "red",
                params: {
                  name: "设备真实地理位罟",
                  radius: 100000,
                  radius1: 300000,
                  radiusFlag: true,
                  ...itemDetail,
                },
              },
              {
                lng: itemDetail.beforeEquipRiskLon,
                lat: itemDetail.beforeEquipRiskLat,
                color: "yellow",
                params: {
                  name: "抗定位前估计位罟",
                  ...itemDetail,
                },
              },
            ],
          });
        });
      }
    },

    markerHandle(e) {
      console.log(e);
    },
    markerHandledetail(e) {
      console.log(e);
    },
    // 抗定位按钮
    tonetworkestimate() {
      this.$router.push('/networkestimate?id=' + this.detail.id)
    },
    // 重定位
    relocation() {
      this.dialogFormVisible = true
    },
    sure(form) {
      repositioning(form).then(res => {
        if (res.code == 200) {
          this.$message.success('重定位成功')
          this.initMap(this.$route.query.id);
        }
      })
    },
  },
};
</script>
